<template>
  <div>
    <div v-if="!editorOpen">
      <el-button type="primary" @click="openEditor">打开编辑器</el-button>
    </div>
    <div v-else>
      <mavon-editor v-model="noteContent" :options="editorOptions" :style="editorStyle"></mavon-editor>
      <div>
        <el-button type="primary" @click="saveNote">保存并下载</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import 'mavon-editor/dist/css/index.css';
import { ElButton } from 'element-plus';

export default {
  name: "NoteTool",
  components: {
    ElButton,
  },
  data() {
    return {
      noteContent: "",
      editorOptions: {
        // 在这里配置编辑器选项
        // 更多选项可以参考 `mavon-editor` 的文档
      },
      editorStyle: {
        height: '480px', // 设置编辑器高度
        fontSize: '16px', // 设置字体大小
        // 其他样式属性
      },
      editorOpen: false, // 控制编辑器的显示和隐藏
    };
  },
  methods: {
    openEditor() {
      this.noteContent = ""; // 打开编辑器时重置内容为空字符串
      this.editorOpen = true;
    },
    saveNote() {
      const blob = new Blob([this.noteContent], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'note.txt';
      link.click();
      URL.revokeObjectURL(url);
      localStorage.setItem("noteContent", this.noteContent);
      this.$message.success("笔记已保存并下载完毕！");
    },
    loadNote() {
      this.noteContent = localStorage.getItem("noteContent") || "";
    },
  },
  created() {
    this.loadNote();
  },
};
</script>

<style>
/* 样式 */
</style>